{% extends "app/base_site.html" %}

{% block title %} 控制面板 {% endblock title %}

{% block stylesheets %}
  {{ block.super }}
{% endblock stylesheets %}

{% block content %}
  <div class="right_col" role="main">


    <div class="row">
        <div class="col-md-4 col-sm-6 col-xs-12">
          <div class="x_panel">
            <div class="x_title">
              <h2>CPU利用率</h2>
              <div class="clearfix"></div>
            </div>
            <div class="x_content">
                <div id="cpuCharts" style="height:220px"></div>
            </div>
          </div>
        </div>
        <div class="col-md-4 col-sm-6 col-xs-12">
          <div class="x_panel">
            <div class="x_title">
              <h2>内存利用率</h2>

              <div class="clearfix"></div>
            </div>
            <div class="x_content">
                <div id="memoryCharts" style="height:220px"></div>
            </div>
          </div>
        </div>
        <div class="col-md-4 col-sm-6 col-xs-12">
          <div class="x_panel">
            <div class="x_title">
              <h2>存储利用率</h2>
              <div class="clearfix"></div>
            </div>
            <div class="x_content">
                <div id="diskCharts" style="height:220px"></div>
            </div>
          </div>
        </div>
        <div class="clearfix"></div>
        <div class="col-md-4 col-sm-6 col-xs-12">
          <div class="x_panel">
            <div class="x_title">
                <h2>流媒体服务器</h2>
              <div class="clearfix"></div>
            </div>
            <div class="x_content">
              <table class="table table-hover">
                <tbody>
                 <tr>
                    <th scope="row">进程状态</th>
                    <th scope="row" id="zlm_process_state">离线</th>
                  </tr>
                 <tr>
                    <th scope="row">在线视频</th>
                    <th scope="row" id="zlm_total_media_count">0</th>
                  </tr>

                </tbody>
              </table>

            </div>
          </div>
        </div>

        <div class="col-md-4 col-sm-6 col-xs-12">
          <div class="x_panel">
            <div class="x_title">
                <h2>系统信息</h2>
              <div class="clearfix"></div>
            </div>
            <div class="x_content">
              <table class="table table-hover">
                <tbody>
                  <tr>
                    <th scope="row">版本</th>
                    <th scope="row" id="project_version">Version</th>
                  </tr>

                  <tr>
                    <th scope="row">机器</th>
                    <th scope="row" id="os_machine_node">Machine</th>
                  </tr>

                  <tr>
                    <th scope="row">系统</th>
                    <th scope="row" id="os_system_name">System</th>
                  </tr>

                  <tr>
                    <th scope="row">运行</th>
                    <th scope="row" id="os_run_date_str">00:00:00</th>
                  </tr>
                    <tr>
                    <th scope="row">CPU</th>
                    <th scope="row" id="os_cpu_used_rate">0%</th>
                  </tr>

                  <tr>
                    <th scope="row">内存</th>
                    <th scope="row" id="os_virtual_mem_used_rate">0%</th>
                  </tr>

                   <tr>
                    <th scope="row">存储</th>
                    <th scope="row" id="os_disk_used_rate">0%</th>
                  </tr>
                </tbody>
              </table>

            </div>
          </div>
        </div>

        <div class="col-md-4 col-sm-6 col-xs-12">
          <div class="x_panel">
            <div class="x_title">
                <h2>接入信息</h2>
              </ul>
              <div class="clearfix"></div>
            </div>
            <div class="x_content">
              <table class="table table-hover">
                <tbody>
                   <tr>
                    <th scope="row">节点数量</th>
                    <th scope="row" id="node_count">0</th>
                  </tr>


                </tbody>
              </table>

            </div>
          </div>
        </div>

        <div class="clearfix"></div>

    </div>


  </div>
{% endblock content %}

{% block javascripts %}
  {{ block.super}}

<script src="/static/lib/highcharts/highcharts.js"></script>
<script src="/static/lib/highcharts/modules/exporting.js"></script>
<script src="/static/lib/highcharts-plugins/highcharts-zh_CN.js"></script>
<script>
        let eleCheckVersionDialog = $("#checkVersionDialog");
        let eleCheckVersionData = $("#checkVersionData");
        let downloadNewVersionUrl = "";

        Highcharts.setOptions({
            global: {
                    useUTC: false
            }
        });
        function activeLastPointToolip(chart) {
            let points = chart.series[0].points;
            chart.tooltip.refresh(points[points.length -1]);
        }
        let cpuCharts = Highcharts.chart('cpuCharts', {
            exporting:{
                enabled:false //隐藏右上角菜单
            },
            credits:{
                enabled:false//隐藏右下角logo
            },
            chart: {
                type: 'spline',
                marginRight: 10,
                events: {
                    load: function () {
                        let chart = this;
                        activeLastPointToolip(chart);
                    }
                }
            },
            title: {
                    text: null
            },
            xAxis: {
                    type: 'datetime',
                    tickPixelInterval: 150
            },
             yAxis: [{
                min:0,
                title: {
                    text: null
                },
                showFirstLabel: true
            }],
            tooltip: {
                    formatter: function () {
                            return '<b>' + this.series.name + '</b><br/>' +
                                    Highcharts.dateFormat('%Y-%m-%d %H:%M:%S', this.x) + '<br/>' +
                                    Highcharts.numberFormat(this.y, 2);


                    }
            },
            legend: {
                    enabled: false //隐藏底部类别名称
            },
            series: [{
                    name: 'CPU利用率',
                    data: (function () {
                            // 生成随机值
                            var data = [],
                                    time = (new Date()).getTime(),
                                    i;
                            for (i = -9; i <= 0; i += 1) {
                                    data.push({
                                            x: time + i * 1000,
                                            y: 0 //Math.random()
                                    });
                            }

                            return data;
                    }())
            }]
        });
        let memoryCharts = Highcharts.chart('memoryCharts', {
            exporting:{
                enabled:false //隐藏右上角菜单
            },
            credits:{
                enabled:false//隐藏右下角logo
            },
            chart: {
                type: 'spline',
                marginRight: 10,
                events: {
                    load: function () {
                        let chart = this;
                        activeLastPointToolip(chart);
                    }
                }
            },
            title: {
                text: null
            },
            xAxis: {
                    type: 'datetime',
                    tickPixelInterval: 150
            },
             yAxis: [{ // 第一个 Y 轴，放置在左边（默认在坐标）
                title: {
                    text: null
                },
                showFirstLabel: true
            }],
            tooltip: {
                    formatter: function () {
                            return '<b>' + this.series.name + '</b><br/>' +
                                    Highcharts.dateFormat('%Y-%m-%d %H:%M:%S', this.x) + '<br/>' +
                                    Highcharts.numberFormat(this.y, 2);
                    }
            },
            legend: {
                    enabled: false
            },
            series: [{
                    name: '内存利用率',
                    data: (function () {
                            // 生成随机值
                            let data = [],
                            time = (new Date()).getTime(),
                            i;

                            for (i = -9; i <= 0; i += 1) {
                                    data.push({
                                            x: time + i * 1000,
                                            y: 0 //Math.random()
                                    });
                            }
                            return data;
                    }())
            }]
        });
        let diskCharts = Highcharts.chart('diskCharts', {
            exporting:{
                enabled:false //隐藏右上角菜单
            },
            credits:{
                enabled:false//隐藏右下角logo
            },
            chart: {
                type: 'spline',
                marginRight: 10,
                events: {
                    load: function () {
                        let chart = this;
                        activeLastPointToolip(chart);
                    }
                }
            },
            title: {
                    text: null
            },
            xAxis: {
                    type: 'datetime',
                    tickPixelInterval: 150
            },
             yAxis: [{
                min:0,
                title: {
                    text: null
                },
                showFirstLabel: true
            }],
            tooltip: {
                    formatter: function () {
                            return '<b>' + this.series.name + '</b><br/>' +
                                    Highcharts.dateFormat('%Y-%m-%d %H:%M:%S', this.x) + '<br/>' +
                                    Highcharts.numberFormat(this.y, 2);


                    }
            },
            legend: {
                    enabled: false
            },
            series: [{
                    name: '磁盘利用率',
                    data: (function () {
                            // 生成随机值
                            let data = [],
                            time = (new Date()).getTime(),
                            i;

                            for (i = -9; i <= 0; i += 1) {
                                    data.push({
                                            x: time + i * 1000,
                                            y: 0 //Math.random()
                                    });
                            }

                            return data;
                    }())
            }]
        });

        //流媒体服务器
        let eleZlmProcessState = $("#zlm_process_state");
        let eleZlmTotalMediaCount = $("#zlm_total_media_count");

        //系统信息
        let eleProjectVersion = $("#project_version");
        let eleOsMachineNode = $("#os_machine_node");
        let eleOsSystemName = $("#os_system_name");
        let ele_os_run_date_str = $("#os_run_date_str");
        let ele_os_cpu_used_rate = $("#os_cpu_used_rate");
        let ele_os_virtual_mem_used_rate = $("#os_virtual_mem_used_rate");
        let ele_os_disk_used_rate = $("#os_disk_used_rate ");


        let eleNodeCount = $("#node_count ");


        function f_getIndex() {
            $.ajax({
               url: '/open/getIndex',
               type: "get",
               async: true,
               data: {},
               dataType: "json",
               timeout: 0,
               error: function () {
                    myAlert("网络异常，请确定网络正常！","error");
               },
               success: function (res) {
                   if(res.code === 1000){
                        try {
                            let osInfo = res["osInfo"];
                            let appInfo = res["appInfo"];

                            let project_version = appInfo["project_version"]
                            let project_flag = appInfo["project_flag"]

                            let system_name = osInfo["system_name"];
                            let machine_node = osInfo["machine_node"];
                            let os_cpu_used_rate = osInfo["os_cpu_used_rate"];
                            let os_virtual_mem_used_rate = osInfo["os_virtual_mem_used_rate"];
                            let os_disk_used_rate = osInfo["os_disk_used_rate"];
                            let os_cpu_used_rate_str = osInfo["os_cpu_used_rate_str"];
                            let os_virtual_mem_used_rate_str = osInfo["os_virtual_mem_used_rate_str"];
                            let os_disk_used_rate_str = osInfo["os_disk_used_rate_str"];
                            let os_run_date_str = osInfo["os_run_date_str"];

                            eleProjectVersion.html("v"+project_version);
                            eleOsMachineNode.html(machine_node);
                            eleOsSystemName.html(system_name);
                            ele_os_run_date_str.html(os_run_date_str);
                            ele_os_cpu_used_rate.html(os_cpu_used_rate_str);
                            ele_os_virtual_mem_used_rate.html(os_virtual_mem_used_rate_str);
                            ele_os_disk_used_rate.html(os_disk_used_rate_str);

                           //设置图表数据
                            let x = (new Date()).getTime();
                            cpuCharts.series[0].addPoint([x, os_cpu_used_rate], true, true);
                            activeLastPointToolip(cpuCharts);
                            memoryCharts.series[0].addPoint([x, os_virtual_mem_used_rate], true, true);
                            activeLastPointToolip(memoryCharts);
                            diskCharts.series[0].addPoint([x, os_disk_used_rate], true, true);
                            activeLastPointToolip(diskCharts);
                        }catch (e) {
                            console.log(e)
                        }
                   }else{
                        console.log(res.msg);
                   }
                   setTimeout(function () {
                       f_getIndex();
                   }, 6000);
               }
            });
        }
        function f_getZlmProcessData() {
            $.ajax({
               url: '/open/getZlmProcessData',
               type: "get",
               async: true,
               data: {},
               dataType: "json",
               timeout: 0,
               error: function () {
                    myAlert("网络异常，请确定网络正常！","error");
               },
               success: function (res) {
                    let info = res["info"];
                    let process_state = parseInt(info["process_state"]);
                    let total_media_count = parseInt(info["total_media_count"]);

                    if(process_state===1){
                        eleZlmProcessState.html("<span class='sun-state-success'>在线</span>");
                    }else{
                        eleZlmProcessState.html("<span class='sun-state-error'>离线</span>");
                    }
                    eleZlmTotalMediaCount.html(total_media_count);
               }
            });
        }

        function f_nodeOpenInfo() {
            $.ajax({
               url: '/node/openInfo',
               type: "get",
               async: true,
               data: {},
               dataType: "json",
               timeout: 0,
               error: function () {
                    myAlert("网络异常，请确定网络正常！","error");
               },
               success: function (res) {
                   if(res.code === 1000){
                       let info = res.info;
                       eleNodeCount.html(info.node_count)

                   }else{
                        console.log(res.msg);
                   }
               }
            });
        }
        $(function() {
            f_getIndex();
            f_getZlmProcessData();
            f_nodeOpenInfo();
        });


</script>
{% endblock javascripts %}

